<template>
	<view class="warpper">
		<!-- #ifdef APP || MP-WEIXIN -->
		<view class="bg"></view>
		<!-- #endif --> 
		
		<view class="imagehome">
			
			<view class="header">
				<!-- #ifdef APP || MP-WEIXIN -->
				<view class="imagesHeader">
					<view class="imagesHeaderText">					
						图片换脸
					</view>			
				</view>			
				<!-- #endif -->	
				
				<scroll-view scroll-x="true" class="scroll-x" scroll-with-animation="true" show-scrollbar="false"
					enable-flex="true">
					<text :class="['tt', choise_cate == item[0] ? 'choseed' : '']"
						v-for="(item, index) in image_muban_cate" :key="item[0]" @click="onCateClick(item)">
						{{ item[1] }}
					</text>
				</scroll-view>
				<view class="imageMenu" @click="openMenu"><image class="imageMenuImg"  src="/static/img/imageMenu.png"></image></view>
			</view>
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"
				enable-flex="true">
				<view class="scroll-y">
					<image :src="item.thumbnail" class="s-image " lazy-load="true" webp="true" mode="aspectFill"
						v-for="(item, index) in image_muban_list" :key="index" @click="onImgClick(item)"></image>
				</view>
			</mescroll-body>
		</view>
		<uni-popup ref="popup" :mask-click="false" @maskClick="closeMenu">
			<view class="opoupBox" @click="closeMenu">
				<text :class="['opoupTab', choise_cate == item[0] ? 'choseed' : '']"
					v-for="(item, index) in image_muban_cate" :key="item[0]" @click="onCateClick(item,true)">
					{{ item[1] }}
				</text>
			</view>
			<!-- <button @click="closeMenu">关闭</button> -->
		</uni-popup>
	</view>
	
</template>

<script>
	import {
		get_image_muban_cate,
		get_image_muban_list
	} from '@/src/api/huanlian.js';
	import {
		jumpto as jump
	} from '@/src/utils/utils.js';
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';

	export default {
		mixins: [MescrollMixin], // 使用mixin

		data() {
			return {
				image_muban_cate: null,
				choise_cate: null,
				image_muban_list: null,
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				}
			};
		},
		onLoad() {
			this.get_cate();
			uni.setNavigationBarColor({
			  frontColor: '#000000',
			  backgroundColor:'#fffff'
			  
			})
		},
		onShow: function() {
			this.startListeningToNetworkStatus();
		},
		onHide: function() {
			this.stopListeningToNetworkStatus();
		},
		methods: {
		
			async get_cate() {
				try {
					let res = await get_image_muban_cate();
					this.image_muban_cate = res.data.cates;
					this.choise_cate = this.image_muban_cate[0][0];
					// this.get_list()
					this.reloadList();
				} catch (e) {
					if (!e) return
					uni.showModal({
						content: e.errMsg || e.message,
						showCancel: false
					});
				}
			},
			onCateClick(item,flag) {
				this.choise_cate = item[0];
				this.reloadList();
				if(flag){
					this.$refs.popup.close()
				}
			},
			onImgClick(item) {
				jump(`/src/pages/Ability/ImageRongHe/ImageRongHe?muban_id=${item.i_id}&muban_url=${item.image}&face_image_list=${encodeURIComponent(JSON.stringify(item.face_image_list ||[]))}`);
			},
			async upCallback(page) {
				if (!this.choise_cate) return;
				try {
					let res = await get_image_muban_list({
						page_number: page.num,
						cate: this.choise_cate
					});

					let curPageData = res.data.list;
					let curPageLen = curPageData.length;
					if (page.num == 1) this.image_muban_list = []; //如果是第一页需手动置空列表
					this.image_muban_list = this.image_muban_list.concat(curPageData); //追加新数据
					setTimeout(() => {
						this.mescroll.endSuccess(curPageLen, res.data.has_next);
					}, 500);
				} catch (e) {
					console.log(e);
					this.mescroll.endErr();
				}
			},
			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
			reloadList() {
				this.mescroll.scrollTo(0, 0);
				this.mescroll.resetUpScroll();
			},
			startListeningToNetworkStatus() {
				uni.onNetworkStatusChange(this.handleNetworkStatusChange);
			},
			stopListeningToNetworkStatus() {
				uni.offNetworkStatusChange(this.handleNetworkStatusChange);
			},
			async handleNetworkStatusChange(res) {
				if (res.isConnected && !this.choise_cate) {
					// 网络连接正常
					await this.get_cate();
					this.reloadList();
				} else {
				}
			},
						//菜单栏弹出
			openMenu () {
				this.$refs.popup.open('left')
			},
			closeMenu () {
				this.$refs.popup.close()
			}
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: "一键Ai换脸，视频换脸，图片换脸，Ai写真，快来体验吧",
				imageUrl: "https://sm.2sxzw.com/mgmg/jiabin01/mine/fenxiang.jpg",
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: "一键Ai换脸，视频换脸，图片换脸，Ai写真，快来体验吧",
				imageUrl: "https://sm.2sxzw.com/mgmg/jiabin01/mine/fenxiang.jpg",
			}
		},
	};
</script>

<style lang="scss">
	@import 'ImageHome.scss';
</style>